<template>
    <div id="box">
        <div class="login-container">
            <h2>密码管理</h2>
            <el-input class="input-class"  v-model="username" placeholder="请输入用户名"></el-input>
            <el-input class="input-class"  v-model="phone" placeholder="请输入电话号码"></el-input>
            <el-input class="input-class"  v-model="email" placeholder="请输入电子邮件"></el-input>
            <el-button class="button-class" type="primary" @click="getpassword" plain >查看密码</el-button><br>
            <el-button class="button-class" type="primary" @click="returnLoginPage" plain>返回登录界面</el-button>
        </div>
        <el-dialog class="dialog-class" v-model="DialogVisible">
            <div>
                <p style="font-size: large;">您的密码为：{{ this.password }}</p>
            </div>
            <el-button  type="primary" style="margin-top: 5px;" @click="this.DialogVisible=false">返回</el-button>
        </el-dialog>
    </div>
</template>

<script>
import axios from "axios";
export default {
    name:"RegisterPage",
    data(){
        return{
            username:"",
            password:"",
            realname:"",
            nickname:"",
            age:"",
            phone:"",
            email:"",
            remark:"",
            DialogVisible: false,
        }
    },
    methods:{
       getpassword(){
        const params={
                "username": this.username,
                "password":this.password,
                "realname":this.realname,
                "nickname":this.nickname,
                "age":this.age,
                "phone":this.phone,
                "email":this.email,
                "remark":this.remark,
            
            }
            //发送请求 http://localhost:80/getpassword
            axios.post("user/getpassword",params).then(res=>{
                console.log(JSON.stringify(res));
                if(res.data.code===200){
                    this.password=res.data.data;
                    this.DialogVisible=true;
                    return;
                }
                this.$message.error("无法获取密码！！！！")
            }).catch(err=>{
                console.log(JSON.stringify(err))
            })
        },
      returnLoginPage(){
        this.$router.push("/");
        return;
      }
       }
    }


</script>
<style scoped>
#box {
    background-color:rgba(13, 191, 240, 0.4);
    position:fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center; /* 让容器中的元素水平居中 */
    align-items: center; /* 垂直居中 */
}
.login-container {
width: 300px;
height: 350px;
background-color: rgba(0, 0, 0, 0.1);
padding: 40px;
border-radius: 8px;

}
.input-class {
    margin-top: 20px;
}
.button-class {
    width: 100%;
    margin-top: 20px;
    border-radius: 20px;
}

.dialog-class {
    width: 300px;
    height: 200px;
}
</style>